<template>
  <div style="margin:10px;">
    <jh-virtual-select :data='list' v-model="value" placeholder='请选择' filterable/>
    <!-- <pre style="margin-top:20px;">
      {{value}}
    </pre> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      value: '',
    };
  },
  mounted() {
    for (let i = 1; i <= 10 * 1000; i++) {
      this.list.push({
        value: Mock.Random.id() + '-' + i,
        label: Mock.Random.cname(),
        disabled: i % 5 === 0,
      });
    }
    this.value = this.list[0].value;
    // for (let i = 0; i < 3; i++) {
    //   const item = {
    //     value: Mock.Random.id() + '-' + i,
    //     label: Mock.Random.cname(),
    //     children: [],
    //   };
    //   for (let j = 0; j < 20; j++) {
    //     item.children.push({
    //       value: Mock.Random.id() + '-' + j,
    //       label: Mock.Random.cname(),
    //       disabled: j % 5 === 0,
    //     });
    //   }
    //   this.list.push(item);
    // }
  },
  methods: {
    render(data) {
      const div = document.createElement('div');
      div.textContent = `${data.label}-自定义`;
      return div;
    },
  },
};
</script>

<style lang="less" scoped>
</style>
